/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/* eslint-disable react/sort-comp */
/**
 * 扫描配置页面
 *  */
import React, { PureComponent } from 'react';
import { Tabs } from 'antd';
import { connect } from 'dva';
import PageHeaderLayout from '@/layouts/PageHeaderLayout';
import { changePostName } from '@/utils/changePostCompanyName';
import styles from '../style.less';
import StationSeting from './StationSeting';
import EquipmentNumber from './EquipmentNumber';
import GunRegister from './GunRegister';
import TaskJtNumber from './TaskJtNumber';
import SendSetting from './SendSetting';

const { TabPane } = Tabs;

@connect(({ user }) => ({
  user_info: user.currentUser.user_info,
}))
class ScanConfiguration extends PureComponent {
  state = {
    activeKey: 'prevStation',
    panesArr: [],
  };

  componentDidMount() {
    const {
      setRecord: { brand },
    } = this.props;
    this.renderTabs(brand);
  }

  onTabChange = activeKey => {
    this.setState({
      activeKey,
    });
  };

  renderTabs = brand => {
    const tabsArr = this.sortTabByBrand(brand);
    const panesArr = tabsArr.map(item => (
      <TabPane tab={item.tab} key={item.key}>
        {item.component}
      </TabPane>
    ));
    this.setState({ panesArr });
  };

  sortTabByBrand = brand => {
    const { showDetail, setRecord, user_info = {} } = this.props;
    const { realAccount } = user_info;
    // 假账号
    const fakeAccount = realAccount == 2;
    const ALL_PANES = {
      // 所有的tab页面
      prevStation: {
        tab: '上一站设置',
        component: (
          <StationSeting
            activeKey="prevStation"
            showDetail={showDetail}
            setRecord={setRecord}
            type="prevStation"
          />
        ),
        brands: ['zt', 'fw', 'yt'], // 丰网、中通、圆通不显示上一站
      },
      nextStation: {
        tab: '下一站设置',
        component: (
          <StationSeting
            activeKey="nextStation"
            showDetail={showDetail}
            setRecord={setRecord}
            type="nextStation"
          />
        ),
        brands: ['jt', 'tt', 'ems'], // 极兔，天天，邮政不显示下一站
      },
      taskJtNumber: {
        tab: '任务号',
        component: (
          <TaskJtNumber
            activeKey="prevStation"
            showDetail={showDetail}
            setRecord={setRecord}
            type="prevStation"
          />
        ),
        brands: ['jt'], // 只有极兔才会显示任务号
      },
      gunNumber: {
        tab: '巴枪设备编号',
        component: (
          <EquipmentNumber
            activeKey="gunNumber"
            showDetail={showDetail}
            setRecord={setRecord}
            type="gunNumber"
          />
        ),
        brands: ['yd', 'sto', 'zt', 'yt'], // 韵达、申通显示巴枪设备编号
      },
      gunRegister: {
        tab: '巴枪注册',
        component: (
          <GunRegister
            activeKey="gunRegister"
            showDetail={showDetail}
            setRecord={setRecord}
            type="gunRegister"
          />
        ),
        brands: ['zt'], // 只有中通显示巴枪注册
      },
      sendSetting: {
        tab: '发派设置',
        component: (
          <SendSetting
            activeKey="sendSetting"
            showDetail={showDetail}
            setRecord={setRecord}
            type="sendSetting"
          />
        ),
        brands: ['sto', 'zt', 'yd', 'yt', 'fw', 'zykd'],
      },
    };
    // 通过brands字段来决定不需要显示的tab
    const conditionReversedTab = ['prevStation', 'nextStation'];
    const tabsArr = [];
    const brandName = changePostName(brand);
    Object.keys(ALL_PANES).forEach(key => {
      const pane = ALL_PANES[key];
      // 判断快递品牌是否存在
      let hasBrand = pane.brands.some(item => brandName == item);
      // 判断取反，统一判断逻辑
      conditionReversedTab.includes(key) && (hasBrand = !hasBrand);
      pane.key = key;
      if (hasBrand) {
        if (fakeAccount) {
          // 假账号，屏蔽巴枪设备编号
          if (key == 'gunNumber') return;
          // 中通，屏蔽上一站和发派设置
          if (['nextStation', 'sendSetting'].includes(key) && brandName == 'zt') return;
        }

        tabsArr.push(pane);
      }
    });
    // 设置初始的activeKey
    this.onTabChange(tabsArr[0].key);
    return tabsArr;
  };

  render() {
    const { activeKey, panesArr } = this.state;
    return (
      <PageHeaderLayout title="扫描设置">
        <div className={styles.main}>
          <div className={styles.PostOption}>
            <Tabs type="card" activeKey={activeKey} onChange={this.onTabChange}>
              {panesArr.map(item => item)}
            </Tabs>
          </div>
        </div>
      </PageHeaderLayout>
    );
  }
}

export default ScanConfiguration;
